import React, { useEffect, useRef } from 'react'
import type { FC } from 'react'

interface HeroProps {
  title: string
  description: string
  buttonText: string
  onButtonClick: () => void
}

const Hero: FC<HeroProps> = ({ 
  title, 
  description, 
  buttonText, 
  onButtonClick 
}) => {
  const heroRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // 添加淡入动画
    if (heroRef.current) {
      heroRef.current.classList.add('animate-fadeIn')
    }
  }, [])

  return (
    <section className="mb-12">
      <div 
        ref={heroRef}
        className="bg-gradient-to-r from-primary/10 to-accent/10 rounded-2xl p-8 md:p-12 shadow-lg transition-all duration-700 hover:shadow-xl relative overflow-hidden"
      >
        {/* 装饰性背景元素 */}
        <div className="absolute -top-24 -right-24 w-64 h-64 bg-primary/20 rounded-full blur-3xl transition-all duration-700 hover:scale-125"></div>
        <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-accent/20 rounded-full blur-3xl transition-all duration-700 hover:scale-125"></div>
        
        <div className="relative z-10">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-center transition-all duration-500 hover:text-primary">
            {title}
          </h2>
          <p className="text-gray-600 text-center max-w-2xl mx-auto mb-8 transition-all duration-500 hover:text-gray-700">
            {description}
          </p>
          <div className="text-center">
            <button 
              className="btn-primary bg-primary text-white font-medium px-8 py-3 rounded-full shadow-md hover:bg-primary/90 hover:scale-105 active:scale-95 transition-all duration-300"
              onClick={onButtonClick}
            >
              {buttonText}
              <span className="ml-2 inline-block transition-transform duration-300 hover:translate-x-1">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Hero